<template>
	  <div ref="dom" class="chart-content"></div>
</template>

<script>
	import echarts from 'echarts'
	export default {
	  name: 'ChartBar',
	  props: {
	    chartData: Object,
	    text: String,
	    subtext: String
	  },
      watch: {
	    chartData(val) {
			this.update()
	    }
      },
	  mounted () {
	  	this.update()
	  },
	  methods: {
	  	update: function() {
	  		this.$nextTick(() => {
		      let xAxisData = Object.keys(this.chartData)
		      let seriesData = Object.values(this.chartData)
		      let option = {
		      	tooltip: {
			        trigger: 'axis'
			    },
				xAxis: {
				    type: 'category',
				    data: xAxisData
				},
				yAxis: {
				    type: 'value'
				},
				series: [{
				    data: seriesData,
				    type: 'line'
				}],
				lineStyle: {
					color: "#1676eb"
				},
				itemStyle: {
					color: "#1676eb"
				}
			  };
			  let dom = echarts.init(this.$refs.dom)
		      dom.setOption(option)
		    })
	  	}
	  }
	}

</script>

<style scoped>
	.chart-content {
		width: 100%;
		height: 100%;
	}
</style>